<!--
 * @Description: zzb
 * @Version: 0.0.1
 * @Autor: zzb
 * @Date: 2021-12-31 18:22:31
 * @LastEditors: zzb
 * @LastEditTime: 2023-02-24 15:14:27
-->
<template>
  <div class="add_net">
    <el-row class="headline grid-content">
      <el-col :span="6" :offset="6">
        {{ headline.includes("edit") ? "网站属性" : "新建网站" }}
      </el-col>
      <el-col :span="6" :offset="6">
        <el-button type="cyan" @click="submitAddSite" size="mini"
          >保存</el-button
        >
        <!-- <el-button type="cyan" @click="resetForm('ruleForm')" size="mini">重置</el-button> -->
        <el-button
          @click="delNet"
          size="mini"
          v-if="headline.includes('edit')"
          v-hasPermi="['system:site:remove']"
          >删除</el-button
        >
        <el-button @click="alert('功能开发中')" size="mini" v-if="false"
          >帮助</el-button
        >
      </el-col>
    </el-row>
    <el-tabs type="border-card" v-model="netAttrTab">
      <el-tab-pane label="基本属性" name="first" :lazy="true">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="editor-plus-form"
          size="small"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="站点名称:" prop="name">
                <el-input
                  v-model="ruleForm.name"
                  maxlength="20"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="站点别名:" prop="alias">
                <el-popover
                  ref="popover"
                  placement="right"
                  width="300"
                  trigger="focus"
                >
                  <span>
                    站点别名只能为小写字母和数字，<br />小写字母开头，<br />长度不小于2个字符，<br />不超过30个字符！
                  </span>
                  <el-input
                    slot="reference"
                    v-model="ruleForm.alias"
                    :readonly="headline.includes('edit')"
                    placeholder="只能输入小写字母和数字"
                    maxlength="30"
                    show-word-limit
                  ></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="notice">
                <span style="color: red">注意：确定后不可以修改！</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="false">
            <el-col :span="12">
              <el-radio-group v-model="ruleForm.allowModifyPublicDayNum">
                <el-radio :label="0">是</el-radio>
                <el-radio :label="1">否</el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="12">
              <el-form-item label="默认文章发布天数:" prop="publicDayNum">
                <el-input v-model="ruleForm.publicDayNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row class="edit-row"> -->
          <el-row>
            <el-col :span="24" style="height: 100%">
              <el-form-item label="编辑器" class="codeEditor">
                <EditorPlus
                  ref="editorPlus"
                  v-bind:template.sync="ruleForm.template"
                  @getTemplete="getTemplete"
                ></EditorPlus>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <!-- 删除对话框 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="open"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <strong style="fontsize: 24px; color: red">请选择您要进行的操作：</strong>
      <el-row>
        <el-radio v-model="delRadio" :label="0">删除到回收站(可恢复)</el-radio>
      </el-row>
      <el-row>
        <el-radio v-model="delRadio" :label="1">永久删除(不可恢复)</el-radio>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button slot="reference" type="primary" @click="submitDelNet"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CodeEditor from "@/components/codeEditor";
import EditorPlus from "@/components/EditorPlus";
import pinyin from "js-pinyin";

import {
  siteDetail,
  siteRemove,
  addSite,
  editsite,
  aliasValidate,
} from "@/api/content/net";

import { mapGetters } from "vuex";
export default {
  props: {
    headline: {
      type: String,
      default: "edit",
    },
    netRow: {
      type: Object,
      require: true,
    },
    siteRow: {
      type: Object,
      require: true,
    },
    columnRow: {
      type: Object,
      require: true,
    },
  },
  data() {
    const validateAlias = (rule, value, callback) => {
      if (this.ruleForm.siteId) callback();
      if (!value) {
        callback(new Error("站点别名不能为空"));
      } else {
        let reg = /^[a-z][a-z0-9]{1,29}$/;
        let flag = value && reg.test(value);
        if (flag) {
          aliasValidate({ siteAlias: value }).then((res) => {
            if (res.data) {
              callback(new Error("站点别名已存在"));
            } else {
              callback();
            }
          });
        } else {
          callback(new Error("站点别名格式不正确"));
        }
      }
    };

    return {
      //对话框标题
      title: "",
      open: false,
      delRadio: 0,
      netAttrTab: undefined,
      radio1: "code",
      template: null,
      ruleForm: {},
      rules: {
        name: [
          { required: true, message: "站点名称不能为空", trigger: "blur" },
        ],
        alias: [{ required: true, validator: validateAlias, trigger: "blur" }],
      },
    };
  },

  components: { CodeEditor, EditorPlus },

  computed: {
    ...mapGetters(["userId"]),
  },

  mounted() {},

  watch: {
    headline: {
      handler(val) {
        val.includes("edit") ? this.getDetail() : this.reset();
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    getDetail() {
      siteDetail(this.siteRow.siteId)
        .then((res) => {
          if (res.code == 200) {
            this.ruleForm = res.data;
            this.ruleForm.nameCache = res.data.name;
          }
        })
        .then(() => {
          this.netAttrTab = "first";
          this.$nextTick(() => {
            this.$refs.editorPlus.radio1 = "view";
          });
        });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //栏目名称失焦时    别名触发
    name2Blur() {
      this.ruleForm.alias = pinyin
        .getFullChars(this.ruleForm.name)
        .toLocaleLowerCase();
    },
    getTemplete(template) {
      // this.template = template;
    },
    //新建站点  按钮
    submitAddSite() {
      // this.ruleForm.template = this.template;
      let form = this.ruleForm;

      form.template =
        form.template &&
        form.template
          .replaceAll("<p>{", "{")
          .replaceAll("}</p>", "}")
          .replaceAll("}<br/></p>", "}<br>")
          .replaceAll("}<br></p>", "}<br>")
          .replaceAll("<p><br></p>", "<br>");
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.headline.includes("edit") ? this.siteEdit() : this.siteAdd();
        }
      });
    },
    //添加站点
    siteAdd() {
      addSite(this.ruleForm).then((res) => {
        if (res.code == 200) {
          this.msgSuccess(res.msg);
          this.$emit("handleChangeRight", 0, "site");
        }
      });
    },
    //修改站点
    siteEdit() {
      editsite(this.ruleForm).then((res) => {
        if (res.code == 200) {
          this.msgSuccess(res.msg);
          this.$emit(
            "handleChangeRight",
            0,
            this.ruleForm.name == this.ruleForm.nameCache ? null : "site"
          );
        }
      });
    },
    //删除站点
    delNet() {
      this.open = true;
      this.title = "栏目网站";
    },
    //确认删除站点
    submitDelNet() {
      this.$confirm(
        this.delRadio == 0
          ? "您确定要将其放入回收站吗？删除后与其相关的内容也将同时被放入回收站!"
          : "您确定要将其永久删除吗？删除后与其相关的内容也将同时被永久删除!",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          siteRemove({
            siteId: this.siteRow.siteId,
            operation: this.delRadio,
          }).then((res) => {
            // this.$parent.getSiteList();
            if (res.code == 200) {
              this.cancel();
              this.msgSuccess(res.msg);
              this.$emit("handleChangeRight", 0, "site");
            }
          });
        })
        .catch(() => {
          return;
        });
    },
    // 表单重置
    reset() {
      this.ruleForm = {
        alias: "",
        createdDate: "",
        allowModifyPublicDayNum: 0,
        publicDayNum: 30,
        deletedDate: "",
        name: "",
        operator: this.$store.getters.loginId,
        state: 1,
        siteId: null,
        template: "",
        updatedDate: "",
        userId: this.userId,
      };
      this.netAttrTab = "first";
      this.$nextTick(() => {
        this.$refs.editorPlus.radio1 = "view";
      });
    },
    cancel() {
      this.open = false;
      this.title = "";
    },
  },
};
</script>

<style scoped lang="scss">
.add_net {
  height: 100%;
  display: flex;
  flex-direction: column;
  .headline {
    font-size: 20px;
    // height: 40px;
    // line-height: 40px;
    font-weight: bold;
    text-align: center;
  }
}
::v-deep .el-tabs {
  flex: 1;
  height: 0; ///////////
  .el-tabs__content {
    height: calc(100% - 60px);
    overflow: auto;
  }
}
::v-deep .el-tabs {
  flex: 1;
  height: 0; ///////////
  display: flex;
  flex-direction: column;
  .el-tabs__content {
    height: calc(100% - 60px);
    flex: 1;
    overflow: auto;
    .el-tab-pane {
      height: 100%;

      .editor-plus-form {
        height: 100%;
        display: flex;
        flex-direction: column;

        .edit-row {
          flex: 1;
          overflow: hidden;
          .codeEditor {
            height: 100%;
            .el-form-item__content {
              height: 100%;
            }
          }
        }
      }
    }
  }
}
// ::v-deep .codeEditor {
//   .el-form-item__content {
//     height: 500px;
//   }
// }
::v-deep .notice .el-form-item__content {
  margin: 0 !important;
}
</style>
